<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="title">
			{{news.title}}
		</view>
		<view class="tateBox">
			<view class="date">
				发布时间: {{news.createDate}}
			</view>
		</view>
	
		<view class="massgeBox">
			<u-parse :html="news.content" ></u-parse>
		</view>
		<view class="footer">
			<view class="laiYuan">
				（来源：{{news.source}}）
			</view>
			<view class="follow">
				<image src="@/static/image/eye.png" mode="" style="width: 28rpx; height: 20rpx; margin-right: 10rpx;" class="Icon"></image>
				<text class="addStyle">{{news.recordNum}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				news:{}
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getNews()
		},
		methods: {
			getNews(){
				this.$axios.request(`${this.$api.getNews}/${this.id}`,"GET").then((val)=>{
					this.news = val.data
					uni.setNavigationBarTitle({
						title:val.data.title
					})
				})
			},
			
		}
	}
</script>

<style>
	.page {
		width: 100%;
		border-top: 1rpx solid #F3F4F8;
		background-color: #F3F4F8;
	}
	.title {
		height: 50rpx;
		font-size: 36rpx;
		padding:30rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 50rpx;
		margin-top: 44rpx;
		color: #333333;
		opacity: 1;
	}
	.tateBox {
		height: 60rpx;
		border-bottom: 2rpx solid #E4E4E4;
		margin: 80rpx 0 20rpx;
	}
	.date {
		float:right ;
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #B2B2B2;
		opacity: 1;
		margin-top: 20rpx;
		padding: 0 32rpx;
	}
	.imageBox {
		height: 380rpx;
	}
	.news {
		width: 100%;
		height: 100%;
	}
	.massgeBox {
		width: 100%;
		height: 100%;
		line-height: 50rpx;
		padding: 29rpx 32rpx 29rpx;
		margin: 0 0 12rpx;
		background-color: #fff;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		overflow-y: auto;
		opacity: 1;
	}
	.footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items:flex-start ;
		padding: 0 32rpx;
		width: 100%;
		height: 130rpx;
		background-color: #FFFFFF;
		margin-top: 12rpx;
	}
	.laiYuan {
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #B2B2B2;
		text-align: left;
		opacity: 1;
		margin-bottom: 20rpx;
	}
	.addStyle,
	.dateTitle,
	.date {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 36rpx;
		color: #999999;
		opacity: 1;
	}
	
</style>
